var dial = function(id) {
	this.canvas = document.getElementById(id);
	this.ctx = this.canvas.getContext("2d");
	this.min = -1; //最小值
	this.max = -1; //最大值
	this.progress = -1; //当前值
	this.lastprogress = -1; //上一次的值
	this.isok = true; //是否开始绘制
	this.backcolor = "#1ec0ff99"; //盘背景色
	this.small_backcolor = "#1ec0ff99"; //小盘背景色
	this.circleCenter_R = 5; //中间小圆的半径 
	this.circle_R = 0; //外圆半径
	this.jiangeangle = 15; //10度一个刻度
	this.kedu_line_height = 5; //刻度高度


}

dial.prototype.init = function() {
	this.initData();
}

dial.prototype.initData = function() {

	// this.min = this.canvas.getAttribute("min");
	// this.max = this.canvas.getAttribute("max");
	// this.progress = this.canvas.getAttribute("progress");
	let n_min = this.canvas.getAttribute("min");
	let n_max = this.canvas.getAttribute("max");
	let n_progress = this.canvas.getAttribute("progress");
	if (n_min == undefined || n_max == undefined || n_progress == undefined) {
		// this.isok = false;
		return;
	}
	//任何数有改动就刷新
	if (n_min != this.min || n_max != this.max || n_progress != this.progress) {
		this.min = n_min;
		this.max = n_max;
		this.lastprogress = this.progress;
		this.progress = n_progress;
		let angle =((this.progress / this.max))+1; //计算在1-2 math.pi 中对应的角度 
		this.redraw(angle); //重新绘制
	}


}

dial.prototype.draw = function() {
	this.initData();
	// if (!this.isok) {
	// 	return;
	// }

}
dial.prototype.redraw = function(angle) {
	this.ctx.clearRect(0, 0, this.width, this.height);

	this.drawBack(this.ctx); //表盘
	this.drawCircleData(this.ctx, angle);
	this.drawKedu(this.ctx); //刻度
	// this.drawLinedege(this.ctx); //指针线

	this.drawCenterCirle(this.ctx); //中间小圆
	this.drawProgressText(this.ctx); //中间文本
}




//绘制中间文字
dial.prototype.drawProgressText = function(ctx) {
	ctx.save();
	ctx.beginPath();
	ctx.textAlign = "center";
	ctx.strokeStyle = this.backcolor;
	ctx.font = "bold 14px STSong";
	let font_height = 10;
	ctx.strokeText(this.progress, this.w_center, this.h_center + font_height);

	ctx.restore();
}

//绘制外表盘
dial.prototype.drawBack = function(ctx) {

	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = this.backcolor;
	ctx.lineWidth = 1;
	// ctx.arc(15,15,5,0,2*Math.PI);
	// ctx.rect(0,0,10,10);
	ctx.arc(this.w_center, this.height, this.circle_R, Math.PI, 2 * Math.PI);
	// ctx.closePath();
	ctx.stroke();
	ctx.restore();
	ctx.clip();
}

// 绘制中心原点
dial.prototype.drawCenterCirle = function(ctx) {
	ctx.save();
	ctx.beginPath();
	ctx.fillStyle = this.small_backcolor;
	ctx.arc(this.w_center, this.height, this.circleCenter_R, Math.PI, 2 * Math.PI);

	ctx.fill();
	ctx.restore();
}


//绘制指针
dial.prototype.drawLinedege = function(ctx) {
	let degree = 180 + ((this.progress / this.max) * 180); //后半圆角度加180
	//计算三角函数公式 x=  圆中心点x + 半径 * cos(角度*3.14/180)
	//   y=圆中心点y + 半径 * sin(角度*3.14/180)
	let endx = this.w_center + this.circle_R * Math.cos(degree * Math.PI / 180); //计算x坐标
	let endy = this.height + this.circle_R * Math.sin(degree * Math.PI / 180); //计算y 坐标
	let startx = this.w_center + this.circleCenter_R * Math.cos(degree * Math.PI / 180);
	let starty = this.height + this.circleCenter_R * Math.sin(degree * Math.PI / 180); //计算y 坐标
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = this.backcolor;
	// ctx.moveTo(this.w_center,this.height);
	ctx.moveTo(startx, starty);
	ctx.lineTo(endx, endy);
	ctx.stroke();
	ctx.restore();
}

dial.prototype.drawCircleData = function(ctx, angle) {
	ctx.save();
	ctx.beginPath();
	//发散性圆形渐变  参数 1 2 3(为对应第一个圆的x y坐标和半径)  456(对应第二个的坐标半径)
	let gredcolor = ctx.createRadialGradient(this.w_center, this.height,this.circle_R-5,this.w_center, this.height,this.circle_R);
	gredcolor.addColorStop(0,"#1ec0ff11"); //内圆的颜色
	gredcolor.addColorStop(1,"#1ec0ff66"); //外圆的颜色
	ctx.fillStyle = gredcolor;
	// ctx.fillStyle = "#FF0000";
	ctx.moveTo(this.w_center, this.height); //移动到原点
	ctx.arc(this.w_center, this.height, this.circle_R, Math.PI, angle * Math.PI); //绘制扇形
	ctx.closePath();
	ctx.fill();
	
	ctx.beginPath();
	ctx.fillStyle = "#1ec0ffaa";
	ctx.moveTo(this.w_center, this.height); //移动到原点
	ctx.arc(this.w_center, this.height, this.circle_R,(angle-0.01)*Math.PI, angle * Math.PI); //绘制扇形
	ctx.closePath();
	ctx.fill();
	
	ctx.restore();
}


//绘制刻度
dial.prototype.drawKedu = function(ctx) {

	ctx.save();
	ctx.strokeStyle = this.backcolor;
	ctx.fillStyle = this.backcolor;
	ctx.lineWidth = 0.5;
	ctx.font = "5px STSong";
	ctx.textAlign = "center";
	for (var i = 180; i <= 360; i += this.jiangeangle) {
		let keduH = this.kedu_line_height;
		let endx = this.w_center + this.circle_R * Math.cos(i * Math.PI / 180); //计算x坐标
		let endy = this.height + this.circle_R * Math.sin(i * Math.PI / 180); //计算x坐标
		if (i == 180 || i == 270 || i == 360) {
			keduH = this.kedu_line_height + 4;

		}

		let startx = this.w_center + (this.circle_R - keduH) * Math.cos(i * Math.PI / 180); //计算x坐标
		let starty = this.height + (this.circle_R - keduH) * Math.sin(i * Math.PI / 180);

		let txt = Math.floor(((i - 180) / 180) * this.max);
		if (i == 180) {
			ctx.beginPath();
			ctx.fillText(txt, startx, starty);
			ctx.fill();
		}
		if (i == 270) {
			ctx.beginPath();
			ctx.fillText(txt, startx, starty + 5);
			ctx.fill();
		}
		if (i == 360) {
			ctx.beginPath();
			ctx.fillText(txt, startx - 5, starty);
			ctx.fill();
		}


		//计算x坐标
		ctx.beginPath();
		ctx.moveTo(startx, starty);
		ctx.lineTo(endx, endy);
		ctx.stroke();

	}
	ctx.restore();


}






dial.prototype.size = function() {
	let rect = this.canvas.getBoundingClientRect();
	let scal = window.devicePixelRatio;
	this.width = rect.width;
	this.height = rect.height;
	this.w_center = this.width / 2;
	this.h_center = this.height / 2;

	this.canvas.style.width = this.width + "px";
	this.canvas.style.height = this.height + "px";

	this.canvas.width = this.width * scal;
	this.canvas.height = this.height * scal;
	this.circle_R = this.w_center - 2; //大圆半径
	this.circleCenter_R = 4; //小圆半径//this.circle_R/4

	this.ctx.scale(scal, scal);

}
